<template>
  <div :class="{ gameDetailContainer: true, bgcActive: Data.initBg }">
    <div :class="{ imgBox: true, imgActive: Data.initFlag }" ref="initImgCover">
      <img :src="gameInfo.imgB || gameInfo.imgS" />
    </div>
    <div :class="{ detailBox: true, detailActive: Data.initBg }">
      <div class="infoBox">
        <div class="gameCname move moveTop">{{ gameInfo.nameC }}</div>
        <div class="gameEname move moveTop">{{ gameInfo.nameE }}</div>
        <div class="gameTime move moveTop">
          <span style="color: rgb(9, 143, 132)">发布时间：</span>
          {{ gameInfo.time }}
        </div>
        <div class="gameType move moveTop">
          <span style="color: rgb(9, 143, 132)">游戏类型：</span
          >{{ gameInfo.type }}
        </div>
        <div class="gameCreate move moveBottom">
          <span style="color: rgb(9, 143, 132)">制作公司：</span>
          {{ gameInfo.create }}
        </div>
        <div class="gameTag move moveBottom">
          <span
            style="
              font-size: 20px;
              color: rgb(9, 143, 132);
              display: inline-block;
              text-align: left;
            "
            >标签：</span
          >
          <span
            v-for="(i, index) in gameInfo.tag"
            :key="index"
            class="tag"
            :style="{ backgroundColor: randomColor() }"
            >{{ i }}</span
          >
        </div>
        <div class="gameIntroduce move moveBottom">
          <div class="introduceTitle">游戏介绍：</div>
          <div class="introduceContent">
            {{ gameInfo.introduce }}
          </div>
        </div>
        <div class="operation move moveBottom">
          <el-button type="success"
            ><a :href="gameInfo.link" target="_blank" style="color: #fff"
              >查看详情</a
            >
          </el-button>
          <el-button @click="closeDetailDialog" type="primary">关闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted, reactive } from "vue";
import { useStore } from "vuex";
const store = useStore();
const gameInfo = computed(() => store.state.gameDetailContent);
const initImgCover = ref();
const Data = reactive({
  initFlag: false,
  initBg: false,
});
onMounted(() => {
  initAnimation();
});

// 关闭dialog
const closeDetailDialog = () => {
  store.commit("setGameDetail", false);
};

// 初始化动画
const initAnimation = () => {
  const pos = store.state.imgPos;
  initImgCover.value.style = `width:${pos.width}px;height:${pos.height}px;top:${pos.top}px;left:${pos.left}px`;
  setTimeout(() => {
    Data.initFlag = true;
  }, 0);
  setTimeout(() => {
    Data.initBg = true;
  }, 800);
  setTimeout(() => {
    initMove();
  }, 1500);
};

// 随机生成标签颜色
const randomColor = () => {
  const random = (min, max) => {
    return Math.floor(Math.random() * (max - min)) + min;
  };
  const r = random(0, 220);
  const g = random(0, 220);
  const b = random(0, 220);
  return `rgb(${r},${g},${b})`;
};

const initMove = () => {
  const items = document.querySelectorAll(".move");
  items[0].style = "transform:translateY(0);transition: all 0.25s ease 0s;";
  items[1].style = "transform:translateY(0);transition: all 0.25s ease 0.25s;";
  items[2].style = "transform:translateY(0);transition: all 0.25s ease 0.5s;";
  items[3].style = "transform:translateY(0);transition: all 0.25s ease 0.75s;";
  items[4].style = "transform:translateY(0);transition: all 0.25s ease 0s;";
  items[5].style = "transform:translateY(0);transition: all 0.25s ease 0.25s;";
  items[6].style = "transform:translateY(0);transition: all 0.25s ease 0.5s;";
  items[7].style = "transform:translateY(0);transition: all 0.25s ease 0.75s;";
};
</script>

<style scoped lang="less">
.gameDetailContainer {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 999;
  transition: all 0.7s;
  .imgBox {
    position: absolute;
    transition: all 0.6s;
    z-index: 1000;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .imgActive {
    width: 300px !important;
    height: 400px !important;
    top: 50% !important;
    left: 15% !important;
    transform: translateY(-50%) !important;
    z-index: 1000;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .detailBox {
    position: relative;
    opacity: 0;
    width: 80vw;
    height: 80vh;
    background-color: #fff;
    transition: all 0.7s;
    box-shadow: 3px 3px 5px 2px rgba(0, 0, 0, 0.3),
      -3px -3px 5px 2px rgba(0, 0, 0, 0.3);
    .infoBox {
      display: flex;
      padding: 20px;
      flex-direction: column;
      position: absolute;
      width: 60%;
      border-left: 1px solid rgb(9, 143, 132);
      right: 5%;
      top: 50%;
      transform: translateY(-50%);
      overflow: hidden;
      .moveTop {
        transform: translateY(-1000px);
      }
      .moveBottom {
        transform: translateY(1000px);
      }
      .gameCname {
        font-size: 40px;
        font-weight: 300;
        letter-spacing: 0.2em;
        margin: 20px 0;
      }
      .gameEname {
        font-size: 20px;
        color: rgb(9, 143, 132);
        letter-spacing: 0.1em;
        margin-bottom: 20px;
      }
      .gameTime,
      .gameType,
      .gameCreate {
        font-size: 20px;
        margin-bottom: 10px;
      }
      .gameTag {
        margin: 10px 0;
        .tag {
          height: 30px;
          line-height: 30px;
          cursor: pointer;
          padding: 5px 10px;
          color: #fff;
          margin: 5px 5px;
          border-radius: 5px;
        }
      }
      .gameIntroduce {
        letter-spacing: 0.1em;
        line-height: 20px;

        .introduceTitle {
          font-size: 20px;
          margin-bottom: 10px;
          color: rgb(9, 143, 132);
        }
      }

      .operation {
        margin-top: 10px;
        display: flex;
      }
    }
  }
}
.bgcActive {
  background-color: rgba(0, 0, 0, 0.6);
}
.detailActive {
  opacity: 1 !important;
}
</style>
